<script setup>
import {timeFilterSpeci} from "@/utils/filter"
import { ref } from "@vue/reactivity"
import { createMessageComment, getAllMessageCommentById } from "../../Api";
    const props = defineProps({
        id: Number,
        name: String,
        content: String,
        time: Number,
    })

    // comment-show
    const list = ref([]);
    let initList = false;
    let showComment = ref(false);
    const getComments = async () => {
        let params = {};
        params.messageId = props.id;
        let res = await getAllMessageCommentById(params);
        list.value = res.data.list;
    }
    const toggleComment = () => {
        if(!initList) {
            getComments();
            initList = true;
        }
        showComment.value = !showComment.value;
    }

    // comment-input
    let inputContent = ref("");
    let inputName = ref("");
    const submitComment = async () => {
        let data = {};
        data.MessageId = props.id;
        data.Content = inputContent.value;
        data.Name = inputName.value;
        data.Time = new Date().getTime();

        await createMessageComment(data);
        getComments();
    }


</script>
 
<template>
    <li class="container">
        <div class="time">{{timeFilterSpeci(time)}}</div>
        <div class="content">
            <h4>{{content}}</h4>
            <div class="second">
                <div>{{name}}</div>
                <div @click="toggleComment">
                    {{showComment?"收起留言↑":"查看留言↓"}}
                </div>
            </div>
            <div v-show="showComment" class="comment-container">
                <div class="comments-container">
                    <div v-for="item in list" :key="item.Id" class="comment">
                        <div class="sm-content">{{item.Content}}</div>
                        <div class="sm-second">
                            <span>{{item.Name}}</span>
                            <span>{{timeFilterSpeci(item.Time)}}</span>
                        </div>
                    </div>
                </div>
                <div class="input-container">
                    <textarea class="text" cols="30" rows="4" placeholder="请输入留言内容" v-model="inputContent"></textarea>
                    <div class="name-form">
                        <label for="name-input" >名字:</label>
                        <input id="name-input" type="text" v-model="inputName">
                    </div>
                    <button @click="submitComment">提交</button>
                </div>
            </div>
        </div>
    </li>
</template>

<style lang='less' scoped>
    .container {
        position: relative;
        &::before {
            content: "";
            width: 15px;
            height: 15px;
            border-radius: 15px;
            background-color: #c4c7cc;
            position: absolute;
            top: 0%;
            left: -30px;
        }
        &::after {
            content: "";
            width: 2px;
            height: calc(100% + 10px);
            background-color: #c4c7cc;
            position: absolute;
            left: -24px;
            top: 15px;
        }
        list-style: none;
        margin-top: 20px;
        .time {
            font-size: 14px;
            color: rgba(0, 0, 0, .6);
        }
        .content {
            margin-top: 10px;
            background-color: white;
            padding: 15px 18px;
            border-radius: 4px;   
            box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
            h4 {
                font-size: 18px;
                font-family: 'kaiti';
                color: rgba(0, 0, 0, .7);
            }
            .second {
                margin-top: 15px;
                overflow: hidden;
                div {
                    &:nth-child(1) {
                        float: left;
                        font-size: 16px;
                    }
                    &:nth-child(2) {
                        cursor: pointer;
                        float: right;
                        color: rgba(0, 0, 0, .4);
                        font-size: 14px;
                    }
                }
            }
        }
        .comment-container {

            .comments-container {
                .comment {
                    margin-top: 10px;
                    background-color: white;
                    padding: 10px 12px;
                    border-radius: 4px;   
                    box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
                    .sm-content {
                        font-size: 17px;
                        font-family: 'kaiti';
                    }
                    .sm-second {
                        margin-top: 12px;
                        span {
                            font-size: 13px;
                        }
                        span:nth-child(1) {
                        }
                        span:nth-child(2) {
                            float: right;
                            color: rgba(0, 0, 0, .6);
                        }
                    }
                }
            }
            .input-container {
                position: relative;
                margin: 0 auto;
                padding-top: 20px;
                height: 200px;
                .text {
                    display: block;
                    margin: 0 auto;
                    width: 500px;
                    resize: none;
                    outline: none;
                    border: 1px solid rgba(0, 0, 0, .3);
                    padding: 10px;
                    border-radius: 5px;
                    font-size: 18px;
                    font-family: "kaiti";
                }
                .name-form {
                    width: 500px;
                    margin: 0 auto;
                    margin-top: 10px;
                    label {
                        font-family: 'kaiti';
                    }
                    input {
                        outline: none;
                        border: 1px solid rgba(0, 0, 0, .3);
                    }
                }
                button {
                    cursor: pointer;
                    position: absolute;
                    border: none;
                    border-radius: 5px;
                    width: 60px;
                    height: 30px;
                    background-color: #5db8f5;
                    right: 10%;
                    top: 65%;
                    &:hover {
                        background-color: #49a4e1;
                    }
                }
            }
        }
    }
</style>